<template>
    <el-upload
            ref="uploadFile"
            class="avatar-uploader"
            :http-request="handleUploadFile"
            :action="upload_url"
            :file-list="fileList"
            :on-remove="handleRemove"
            multiple>
        <el-button icon="el-icon-upload" type="success">{{btnName}}</el-button>

    </el-upload>
</template>

<script>

    export default {
        name: "UploadFileCmm",
        data() {
            return {
                upload_url: '',
                fileList: []
            }
        },
        props: {
            wxFileList: {
                type: Array,
                default: function () {
                    return []
                }
            },
            btnName: {
                type: String,
                default: ''
            }
        },
        created() {

        },
        methods: {
            handleRemove(file, fileList) {
                let imgArray = [];
                fileList.forEach(function (item) {
                    imgArray.push(item.name);
                });
                this.$emit('update:wxImageList', imgArray);
            },
            handleUploadFile(params) {
                const isLt2M = params.file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error("请上传10M以下的图片文件");
                    return false;
                }
                // 根据后台需求数据格式
                const form = new FormData();
                form.append("file", params.file);
                // 文件对象
                this.$store.dispatch('uploadResource', form).then((res) => {

                    let imgArray = [...this.wxImageList];
                    imgArray.push(res.id)
                    this.$emit('update:wxImageList', imgArray);
                });

            }
        }
    }
</script>

<style scoped>

</style>

